<template>
  <div class="LineChartGroup">
    <el-row :gutter="20" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="12" :xl="12">
        <div class="chart-wrapper">
          <p class="box-between line-warp-title">
            <!-- <span>当日就诊量排名前5的科室</span> -->
          </p>
          <bar-dept-one :chart-data="BarDeptOne" />
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" :xl="12">
        <div class="chart-wrapper">
          <p class="box-between line-warp-title">
            <!-- <span>平均就诊量排名前5的医院</span> -->
          </p>
          <bar-dept-two :chart-data="BarDeptTwo" />
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" :xl="12">
        <div class="chart-wrapper">
          <p class="box-between line-warp-title">
            <!-- <span>当日诊断用时排名前5的科室</span> -->
          </p>
          <bar-dept-three :chart-data="BarDeptThree" />
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="12" :xl="12">
        <div class="chart-wrapper">
          <p class="box-between line-warp-title">
            <!-- <span>当日诊断用时排名前5的医院</span> -->
          </p>
          <bar-dept-four :chart-data="BarDeptFour" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import LineChart from './components-group/LineChart'
import BarDeptOne from './components-group/BarDeptOne'
import BarDeptTwo from './components-group/BarDeptTwo'
import BarDeptThree from './components-group/BarDeptThree'
import BarDeptFour from './components-group/BarDeptFour'

export default {
  components: {
    BarDeptOne,
    BarDeptTwo,
    BarDeptThree,
    BarDeptFour
  },
  props: {
    itemsDept: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      BarDeptOne: {},
      BarDeptTwo: {},
      BarDeptThree: {},
      BarDeptFour: {}
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initBarDeptOne()
      this.initBarDeptTwo()
      this.initBarDeptThree()
      this.initBarDeptFour()
    })
  },
  methods: {
    initBarDeptOne() {
      // this.itemsInfo.item.eight.forEach((res) => {
      // this.lineChartItem.expectedData.push(res.num)
      // this.lineChartItem.actualData.push(res.date)
      // })
    },
    initBarDeptTwo() {},
    initBarDeptThree() {},
    initBarDeptFour() {}
  }
}
</script>

<style lang="scss" scoped>
.LineChartGroup {
  margin-top: 30px;
  .chart-wrapper {
    padding: 20px;
    width: 100%;
    height: 400px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    margin-bottom: 10px;
    .line-warp-title {
      margin: 10px 0;
      font-size: 16px;
      color: #333333;
    }
  }
}
</style>
